<template>
  <van-field :name="name" :label="label" :required="required" :rules="required ? rules : []">
    <template #input>
      <van-radio-group v-model="vModelValue" :direction="direction">
        <van-radio v-for="item in columns" :key="item.dictValue" :name="item.dictValue">{{ item.dictLabel }}</van-radio>
      </van-radio-group>
    </template>
  </van-field>
</template>

<script>
import formMixin from './mixin'

export default {
  name: 'FormRadio',
  mixins: [formMixin],
  props: {
    value: {
      type: [String, Number],
      required: true
    },
    direction: {
      type: String,
      default: 'vertical'
    },
    columns: {
      type: Array,
      default() {
        return []
      }
    }
  },
  computed: {
    vModelValue: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('change', val)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.van-radio {
  margin-bottom: 10px;
}
.flex-direction-col {
  .van-radio {
    margin-top: 10px;
    /deep/ {
      .van-radio__label {
        transition: color 0.5s;
      }
      .van-radio__icon--checked {
        & + .van-radio__label {
          color: #1989fa;
        }
      }
    }
  }
}
</style>
